<template>
    <div class="box">
        <van-nav-bar title="施工列表" left-arrow @click-left="back()" class="navBar" :border="false"></van-nav-bar>
        <nav class="menu">
            <ul>
                <li :class="id==1?'active':''" @click="tapMenu(1)">全部</li>
                <li :class="id==2?'active':''" @click="tapMenu(2)">待施工</li>
                <li :class="id==3?'active':''" @click="tapMenu(3)">已完工</li>
                <li :class="id==4?'active':''" @click="tapMenu(4)">已提车</li>
            </ul>
        </nav>
        <Complete :list="state.list" @onSearch="query" @onChooseEmployee="chooseemployeeOnCard" @onChooseTake="chooseTakeOnCard" @onChooseXm="chooseXmOnCard" @onChooseJg="chooseJgOnCard" :total="state.total"/>
        <van-dialog v-model:show="state.showCofirmJunGongDialog" title="确认竣工？" show-cancel-button messageAlign="left" confirmButtonText="确认" @confirm="confirmJunGong()">   
        </van-dialog>
    </div>
</template>

<script setup>
    import {computed, reactive, ref} from 'vue'
    import { useRouter } from "vue-router";
    import {marketDetail} from 'api/sales.js'
    import { onMounted, onUnmounted } from "@vue/runtime-core";
    import Complete from "./complete.vue"
    import {reserve} from 'api/order.js'
    import { updateRepairOrder, repairList} from 'api/repair.js'
    import {employeesList} from 'api/employee.js'
    import { useStore } from "vuex";
    const router = useRouter()
    const store = useStore();

    const back = () => {
        router.back();
    }

    const id = ref(1)

    const tapMenu = (menuId) => {
        console.log(menuId)
        id.value=menuId;
        console.log(state.list)
        var tempList = [];
        if(menuId == 1){
            tempList = state.originList;
        }else{
            for(var i=0 ; i < state.originList.length; i++){
                var item = state.originList[i];
                // console.log(item);
                if(id.value == 2){
                    console.log('a');
                    console.log(item.status);
                    if(item.status == '待施工'){
                        tempList.push(item);
                    }
                }
                if(id.value == 3){
                    if(item.status == '已完工'){
                        tempList.push(item);
                    }
                }
                if(id.value == 4){
                    if(item.status == '已提车'){
                        tempList.push(item);
                    }
                }
            }
        }
        state.list = tempList;
        // var tempList = [];
        // for(var item in state.list){
            // console.log(item);
            // if(id.value == 2){
            //     if(item.status == '待施工'){
            //         tempList.push(item);
            //     }
            // }
            // if(id.value == 3){
            //     if(item.status == '已完工'){
            //         tempList.push(item);
            //     }
            // }
            // if(id.value == 4){
            //     if(item.status == '已提车'){
            //         tempList.push(item);
            //     }
            // }
        // }
        // state.list = tempList;
        // query()
    }

    let state = reactive({
        originList:[],
        list:[],
        limit:10,
        page:0,
        total:0,
        showCofirmJunGongDialog: false,
        currentTargetItem: null,
        employeesList : JSON.parse(localStorage.getItem('employeeList')),
        timer:null,
        userInfo:{}
    })

    //查询门店维修单(由子组件通过emit来调用)
    const query = async () => {
        let res = await repairList();
        state.originList = res.data;
        let tempArray = [];
        if(state.userInfo.remarkOne == "維修工"){
            for(let i = 0; i < res.data.length; i ++){
                let item = res.data[i];
                if(item.staffNo == state.userInfo.staffNo){
                    tempArray.push(item);
                }
            }
            state.list = tempArray;
        }else{
            state.list = res.data;
        }
        if(state.employeesList.length > 0){
            checkStaffName();
        }
    }

    //拉取员工列表
    const fetchEmployeeList = async () => {
        let res = await employeesList({remarkFou:1});
        state.employeesList = res.data.allStaff;
    }


    const checkStaffName = () => {
        for(let i = 0; i < state.list.length; i ++){
            let repairItem = state.list[i];
            for(let q = 0; q < state.employeesList.length; q ++){
                let employeeItem = state.employeesList[q];
                if(employeeItem.staffNo == repairItem.staffNo){
                    repairItem.staffName = employeeItem.name;
                    break;
                }
            } 
        }
    }

    onMounted(()=>{
        var userInfo = store.getters['user/users'];
        state.userInfo = userInfo;
        refreshData();
        state.timer = setInterval(refreshData,15*1000);//15秒钟执行一次
    })

    onUnmounted(()=>{
        clearInterval(state.timer);
    })

    //刷新数据
    const refreshData = async () => {
        console.log('执行刷新任务列表...')
        query();
        // fetchEmployeeList();
    }


    //点击某客片上的指定施工人按钮
    const chooseemployeeOnCard = (item) => {
        // router.push('/repair/employee')
        router.push({path:'/repair/employee',query:item})
    }
    //点击某卡片上的领料按钮
    const chooseTakeOnCard = (item) => {
        router.push({path:'/repair/takeliao',query:item})
    }
    //点击某卡片上的项目按钮
    const chooseXmOnCard = (item) => {
        router.push({path:'/repair/xiangmu',query:item})
    }
    //点击某卡片上的竣工按钮
    const chooseJgOnCard = (item) => {
        state.currentTargetItem = item;
        state.showCofirmJunGongDialog = true;   
    }
    //确认竣工点击
    const confirmJunGong = async () => {
        let res = await updateRepairOrder({id:state.currentTargetItem.id,status:'已完工'})
        if(res.code == "0"){
            id.value = 1;
            query()
        }
    }
</script>

<style lang="scss" scoped>
.box{
    background: #F1F5F8;
    height: 100vh;
    .navBar {
        background: #fff;
    }
    
}
    .menu{
        background-color: #fff;
        ul{
            display: flex;
            height: 50px;
            border-bottom: 2px solid #eee;
            li{
                flex: 1;
                line-height: 50px;
                font-weight: 400;
                &.active{
                    color: #000000;
                    font-weight: 600;
                    position: relative;
                    &::after{
                        width: 19px;
                        height: 4px; 
                        border-radius: 4px;       
                        position: absolute;
                        content:'';
                        left:59%;
                        margin-left: -20px;
                        bottom:2px;
                        background: #5E2F88;
                    }
                }
            }
        }
    }
</style>